<template>
  <!-- <div> -->
  <div>
		<!-- <div v-if="loadmo"> -->
			<!-- <div> -->
			<div style="padding-bottom: 0.26rem;background: #fff">
				<div class="grade-pic">
				 <img :src="img+obj.thumb" alt="" class="header">
				</div>
				<div class="m">
					<div :class="obj.is_promotion == 1||obj.is_promotion == '1'?'m1':'m1name'">
						<p>{{obj.name}}</p>
						<p class="baoguo">
							<span>{{obj.slogen}}</span>
							<span v-if="obj.type == 2||obj.type == '2'">保过班</span>
							<span v-if="obj.type == 1||obj.type == '1'">普通班</span>
							<!-- <span v-if="obj.type == 0||obj.type == '0'"></span> -->
						</p>
						<p class="sj">
							<span v-if="obj.start_time==0||obj.start_time=='0'">{{obj.end_time}}</span>
							<span v-else>{{obj.start_time}}-{{obj.end_time}}</span>
							<span v-if="obj.price==0||obj.price=='0'||obj.price==0.00||obj.price=='0.00'" class="app_pay_chen">免费</span>
							<span v-else>￥{{obj.price}}</span>
						</p>
					</div>
					<div class="top3" v-if="obj.is_promotion == 1||obj.is_promotion == '1'" @click="tuiguang()">
						<img src="../assets/img/tui.png" alt="">
						<p>推广</p>
					</div>
				</div>
			</div>
            <div class="detailline" v-if="obj.notice!=''"></div>
			<!--活动-->
			<van-notice-bar v-if="obj.notice!=''" class="huo1" :text="obj.notice" @click="huo1()"/>
			
			<div class="detailline"></div>
			
			
			<div class="tab">
				<!--tab切换-->
				<van-tabs v-model="active"  swipeable color="#0287FF" title-active-color="#0287FF" title-inactive-color="#C2C9D3">
					<van-tab title="课程介绍" >
						<div class="borderImg" >
							<div v-html="obj.description" class="chu">
							</div>
						</div>
					</van-tab>
					<van-tab title="课程表" >
						<div class="teach"  v-for="(item,ix) in liebiao">
							<div class="p1" @click="showclick(item,ix)">
								
							  <span>{{item.name}}</span>
							  <div>
								<span v-if="(item.is_pay==1||item.is_pay=='1')&&(Number(item.price)>0)" class="itemmai">(已购买)</span>
								<span v-if="item.price==0||item.price=='0'||item.price==0.00||item.price=='0.00'" class="itemmai">(免费)</span>
							   <img :src="coursebiao[ix]==1||coursebiao[ix]=='1'?imgSrc1:imgSrc2" alt="" class="arrows" ref="img">
							  </div>
							</div>

							<div style="box-sizing:border-box;-moz-box-sizing:border-box; -webkit-box-sizing:border-box;padding-bottom: 0.2rem">
								<div class="study" ref="showclick" v-if="coursebiao[ix]==1||coursebiao[ix]=='1'" >
									<div v-for="(it,ixx) in item.course"  @click="zhi(it,item)" class="everygrade">
											<div class="gradeleft">
												<p>{{it.name}}</p>
												<!-- <p v-if="it.type==2||it.flag=='2'">时长:{{it.hours}}分钟</p> -->
												<p>直播时间:{{it.begin_time}}</p>
											</div>
											<div class="graderight">
												<div v-if="(item.is_pay==1||item.is_pay=='1')&&(Number(item.price)>0)">
													<!-- <p>免费观看</p> -->
													<!-- <div v-if="it.type==1||it.type=='1'"> -->
														<p class="zboshate" v-if="it.flag==1||it.flag=='1'">即将播放</p>
														<p v-if="it.flag==2||it.flag=='2'" class="begin"><img src="../assets/img/zhibozhong.png" alt="" style="width: 0.2rem;vertical-align: baseline;margin-right:0.05rem">直播中</p>
														<!-- </div> -->
													    <p v-if="it.flag==3||it.flag=='3'||it.flag==4||it.flag=='4'">回放</p>
												</div>
												<div v-else>
													<div v-if="it.price==0.00||it.price=='0.00'||it.price==0||it.price=='0'">
														<p v-if="it.flag==4||it.flag=='4'" class="freeprice">免费</p>
															<p class="zboshate freeprice" v-if="it.flag==1||it.flag=='1'">即将播放</p>
															<p   v-if="it.flag==2||it.flag=='2'" class="begin freeprice"><img src="../assets/img/zhibozhong.png" alt="" style="width: 0.2rem;vertical-align: baseline;margin-right:0.05rem">直播中</p>
													</div>
												</div>
											</div>
									</div>
								</div>
							</div>

						</div>

					</van-tab>
					<van-tab title="讲师阵容" >
						<div  class="intr" v-for="(i,dex) in teachers">
							<div class="top">
								<div class="topclear">
									<div class="p3" @click="xq(i)"><img :src="img+i.avatar" alt=""></div>
									<div class="name" @click="xq(i)">
										<p v-if='i.is_master==1||i.is_master=="1"'>{{i.name}}<span class="master-title">(班主任)</span></p>
										<p v-else>{{i.name}}</p>
										<p>{{i.honor}}</p>
									</div>
								</div>
								<div class="guanzhu">
									<p @click="attention(i,dex)" v-if="i.collection == 0||i.collection == '0'" class="gg"><span>关注</span></p>
									<p @click="attention(i,dex)" v-else class="gg1"><span>已关注</span></p>
									<p>{{i.follow}}人关注</p>
								</div>
							</div>
							<!-- <p class="long" v-html="i.introduce"></p> -->
						</div>

					</van-tab>
					
					<van-tab title="评价">

						<div class="r">
							<mt-loadmore :bottom-method="loadBottom"  :bottom-all-loaded="allLoaded" ref="loadmoredetail">
								<div>
									<div class="doctor" v-for="(item,index) in pinglun">
										<img v-if="item.avatar!=''" :src="item.avatar" alt="" class="docImg">
										<img v-else :src="avatarimg" alt="" class="docImg">
										<div class="content">
											<p>{{item.nickname}}<span class="commitmain" v-if="item.flag==1||item.flag=='1'">(我)</span></p>
											<p>{{item.addtime}}</p>
											<p>{{item.content | base64Decode}}</p>
											<p @click="dianzan(item.id,item.is_praise,index,item.praise)">
												<img src="../assets/img/buy/zan.png" alt="" v-if="item.is_praise == 1||item.is_praise == '1'">
												<img src="../assets/img/buy/grayzan.png" alt="" v-if="item.is_praise == 0||item.is_praise == '0'">
												<span :class="item.is_praise == 1?'bluezan':'grayzan'">{{item.praise}}</span>
											</p>
										</div>
										<p style="width: 100%;height: 0.02rem;background: rgba(237,237,237,1);margin-top: 0.2rem;"></p>
										<!--评论-->
										<div v-if="fix1&&(obj.is_pay==1||obj.is_pay=='1'||obj.price==0||obj.price=='0'||obj.price==0.00||obj.price=='0.00')">
										  <img src="../assets/img/kechengxiangqing/pinglun.png" alt=""  @click="pl()" class="goback" v-if="obj.is_comment == 0||obj.is_comment == '0'">
										  <img src="../assets/img/shenpin.png" alt=""  @click="commitpl()" class="goback" v-else-if="obj.is_comment == 10||obj.is_comment == '10'">
										</div>
									</div>
								</div>
							</mt-loadmore>

						</div>
						<div style="text-align: center;margin-top: 15%;padding-bottom:10%" v-if="b">
							<div class="chen-kongpicactive">
								<img :src="imgSrc3" mode=""></img>
							</div>
							<div class="chen-kong-text"><span>暂时还没有人评论，
									</span><span>快抢沙发吧…</span></div>
							<!--评论-->
							<!-- <img src="static/img/kechengxiangqing/pinglun.png" alt=""  @click="pl()" class="goback" v-if="obj.is_pay==1&&fix1&&obj.is_comment == 0"> -->
							<div v-if="fix1&&(obj.is_pay==1||obj.is_pay=='1'||obj.price==0||obj.price=='0'||obj.price==0.00||obj.price=='0.00')">
							  <img src="../assets/img/kechengxiangqing/pinglun.png" alt=""  @click="pl()" class="goback" v-if="obj.is_comment == 0||obj.is_comment == '0'">
							  <img src="../assets/img/shenpin.png" alt=""  @click="commitpl()" class="goback" v-else-if="obj.is_comment == 10||obj.is_comment == '10'">
							</div>
						</div>

					</van-tab>
				</van-tabs>
			</div>
			
			
			<!-- <div class="fixbottom"> -->
			<div v-if="obj.all_pay == 0||obj.all_pay == '0'">
				<div class="fixbottom" v-if="Number(obj.price) > 0">
					<div class="shoucang" @click="shoucang" v-if="obj.collection==0||obj.collection=='0'">
						<img src="../assets/img/shouye/xing.png" alt="">
						<p style="color: #C2C9D3;">收藏</p>
					</div>
					<div class="shoucang" @click="shoucang" v-else>
						<img src="../assets/img/shouye/yellowstar.png" alt="">
						<p style="color: #66666;">已收藏</p>
					</div>
					
					
					<p class="mai">
						<span>{{obj.sales}}</span>人已加入
						<!-- <span>{{obj.fake_buy}}</span>人已加入 -->
					</p>
					<div class="pad" v-if='obj.is_stop==1||obj.is_stop=="1"'>
						<button class="padactive">人员已满</button>
					</div>
					<div class="pad" @click="buy()" v-else>
						<button>￥{{obj.price}}立即购买</button>
						<!-- <button class="padactive">人员已满</button> -->
					</div>
				</div>
			</div>
			

			<!--首页图标-->
				<img src="../assets/img/goback.png" alt=""  class="goback" v-if="(active == 0||active == '0')&&fix1" @click="goback()">

			<!--推广图标-->
				<img src="../assets/img/detailkefu.png" alt=""  class="tuiguang" @click="dianhua()" v-if="(active == 0||active == '0')&&fix1">



			<!--购买选择-->
			<mt-popup v-model="popupVisible" popup-transition="popup-fade" position="bottom" style="width: 100%;height: 100%;background:rgba(0,0,0,.1);z-index: 1">

				<div  @click="un()" ref="top"></div>

				<div style="background: #fff;position: absolute;bottom: 0;padding-bottom: 1.2rem;width: 100%;" ref="bto">
					<div style="width: 92%;margin: auto;overflow: hidden">
						<p style="font-size: 0.28rem;line-height: 0.36rem;color: #333;margin-top: 0.4rem;">{{obj.name}}</p>
						<p style="width: 100%;height: 0.02rem;background:rgba(237,237,237,1);margin-top: 0.3rem;"></p>
						<p style="font-size: 0.26rem;line-height: 0.32rem;margin-top: 0.3rem;color:#333;">按阶段购买：</p>

					</div>
					<div class="xuanze">
            <span v-if="obj.is_pay==1||obj.is_pay=='1'">
							<span :class="bol?'red xuangree':'span1 xuangree'" @click="quanbu()">
								全部
								<span>(推荐)</span>
							</span>
						</span>
						<span v-else>
							<span :class="bol?'red':'span1'" @click="quanbu()">
								全部
								<span>(推荐)</span>
							</span>
						</span>
						<span v-for="(item,index) in liebiao">
						   <span v-if='(item.is_pay==1||item.is_pay=="1")&&(item.price==0||item.price=="0"||item.price==0.00||item.price=="0.00")' class="xuanze1 xuanactive" ref="xuan" @click="xuan(item,index)">{{item.name}}<span class="xuanpay">(免费)</span></span>
						   <span v-else-if='(item.is_pay==1||item.is_pay=="1")&&(Number(item.price)>0)' class="xuanze1 xuanactive" ref="xuan" @click="xuan(item,index)">{{item.name}}<span class="xuanpay">(已购买)</span></span>
						   <span v-else class="red xuancolor" ref="xuan" @click="xuan(item,index)">{{item.name}}</span>
						</span>
					</div>
                    <p style="width: 92%;margin: auto;font-size:0.24rem;margin-top: 0.3rem;color: #FF0214;">{{textcenter}}</p>
					<p style="width: 92%;margin:auto;font-size: 0.3rem;font-weight:bold;text-align: right;margin-top: 0.3rem;color:#333333;">
						<span v-if="bol" style="font-size: 0.24rem;text-decoration:line-through;color:rgba(194,201,211,1);margin-right: 0.2rem">原价￥{{obj.price}}</span>
						<span>价格:<span style="color: #FF0214;">￥{{specPrice}}元</span></span>

					</p>

					<van-button type="info" class="queren" @click="queren()">确认购买</van-button>
				</div>



			</mt-popup>

			<!--复制链接-->
			<mt-popup v-model="popupVisible3" popup-transition="popup-fade" position="bottom" style="width: 100%;height: 100%;background:rgba(0,0,0,.1);">
				<div style="position: relative;top: 15%;">
					<div style="width: 92%;height: 7.93rem;background: #fff;text-align: center;margin: auto;overflow: hidden;border-radius: 0.08rem">
						<p style="margin-top: 0.94rem">
							<img src="../assets/img/timg.jpg" alt="" style="width: 3.84rem;height: 3.84rem;">
						</p>
						<section class="form">
							<p class="url">{{url}}</p>
							<button v-clipboard:copy="url"
											v-clipboard:success="onCopy"
											v-clipboard:error="onError" class="fuzhi">
								点击复制链接
							</button>
						</section>
					</div>
				</div>
				<div style="text-align: center;margin-top: 2.3rem">
					<img src="../assets/img/cha1.png" alt="" style="width: 0.66rem;" @click="un2()">
				</div>
			</mt-popup>

			<!--小七咨询-->
			<div class="shoewr-chen-popu">
				<div class='chen-conactive'>
					<div class="chen-contener-popu">
						<div class="chen-con-pic">
							<img :src="img+serviceinfo.qr_code" alt="">
						</div>
						<a class="chen-phone" @click="phoneclick(serviceinfo.tel)">
							<div class="chen-phone-pic">
								<img src="../assets/img/kechengxiangqing/zixun.png" alt="">
							</div>
							<span class="chen-tel">{{serviceinfo.tel}}</span>
						</a>
						<p class="chen-sever">
							客服随时为您提供服务</br>
							点击电话即刻咨询<span style="color: #FE9C2B;">(微信同号)</span></p>
					</div>
					<div class="close-chen">
						<img src="../assets/img/cha1.png" alt="" @click="un1()">
					</div>
				</div>
			</div>



			<!--课程公告-->
			<div class="shoewr-chenhou">
				<div class="chen-contener">
					<p class="chen-title">课程公告</p>
					<p class="chen-text">{{obj.notice}}</p>
					<p class="chen-button" @click="huo2()">确定</p>
				</div>
			</div>
	
			
			<!-- 评论审核弹窗 -->
			<div class="shoewr-chen">
				<div class="chen-contener">
					<p class="chen-text">您的评论正在审核中</p>
					<p class="chen-button" @click="chenclick()">确定</p>
				</div>
			</div>
			
			<!-- 登录弹窗 -->
			<div class="shoewr-chenhoupass">
				<div class="chen-contener chenpass">
					<p class="chen-title">提示</p>
					<p class="chen-text chen-textactive">您需要先登录?</p>
					<div class="chen-but">
						<p class="chen-but-no" @click="repeatclose()">取消</p>
						<p class="chen-but-yes chen-but-yesactive" @click="repeatclick()">去登录</p>
					</div>
				</div>
			</div>
			<!-- </div>
		</div>
		<div class="loadmore" v-else>
		  <img src="static/img/load.gif" alt="">
		</div> -->
  </div>

</template>

<script>
    import Vue from 'vue'
    export default {
        name: "Xiangqing",
      data(){
          return{
			imgSrc1:require('../assets/img/tp.png'),
			imgSrc2:require('../assets/img/bo.png'),
			imgSrc3:require('../assets/img/nokong/nonoteandping.png'),
			loadmo:false,
			avatarimg:this.$store.state.avatarimg,
			phoneurl:this.$store.state.phoneurl,
			loadzheng:false,
			allLoaded:false,
			noloadzheng:false,
			id:'',  //班级id
            b:false,
            liebiao:[],
            teachers:[],
            pinglun:[],
            popupVisible:false,
            popupVisible1:false,
            popupVisible3:false,
            active:0,
            a:this.$store.state.url,
            img:this.$store.state.img,
            obj:{},
            arr:["课程介绍","课程表","讲师阵容"],
            n:0,
            play:'',
            guanzhu:[],
            time:'',
            param:[],
            searchBarFixed:'',
            base:'',
			chooseid:[],
            xuanze:[],
            bol:false,
            bol1:'',
            url:'https://www.csdn.net/gather_22/MtTaAg2sODk2Mi1ibG9n.html',
            top:'',
            fix1:true,
			specPrice:'0',  //阶段价格
			chooseidpay:'',  //没有购买过的阶段id
			page:1,
			coursebiao:[],
			textcenter:'(购买班级全部章节，享受系列优惠价）',
			chooseidpay1:[],
			serviceinfo:'',
          }
      },
      methods:{
		  // 点击拨打电话
		  phoneclick(tel){
		  	window.location.href = 'tel://'+tel+''
		  },
		  xq(it){
			  this.$router.push({
			  	path:'/steach',
			  	query:{
			  		id:it.teacher_id
			  	}
			  })
		  },
		  nologin(){
		  	$('.shoewr-chenhoupass').fadeIn();
		  },
		  // 点击取消
		  repeatclose(){
		  	$('.shoewr-chenhoupass').fadeOut();
		  },
		  // 点击去登录
		  repeatclick(){
		  	$('.shoewr-chenhoupass').fadeOut();
		  	this.d();
		  },
			// 点击正在审核中的评论按钮
			commitpl(){
				$('.shoewr-chen').fadeIn();
			},
			// 点击确定
			chenclick(){
				$('.shoewr-chen').fadeOut();
			},
			// 点赞
       dianzan(id,is_praise,index,praise){
						 var token = localStorage.getItem('token');
						 if(token){
							var that = this;
							 that.axios.get(this.$store.state.url + 'Live/likeComment',{
								params:{
									id:id
								},
							}).then(res=>{
							 if (res.data.errcode == 0||res.data.errcode == '0'){
								 // this.arr = res.data.data
								 if(is_praise==0||is_praise=='0'){
									 that.$toast({
										 message:'点赞成功',
										 position:'bottom'
									 });
									 that.pinglun[index].is_praise = 1;
									 that.pinglun[index].praise = that.pinglun[index].praise+1;
								 }else{
									 that.$toast({
										 message:'取消赞成功',
										 position:'bottom'
									 });
									 that.pinglun[index].is_praise = 0;
									 that.pinglun[index].praise = that.pinglun[index].praise-1;
								 }
								 // that.plliebiao(that.page,that.size);
							 }else{
								 that.$toast({
									 message:res.data.msg,
									 position:'bottom'
								 });
							 }
							})
						 }else{
							this.nologin();
						 }
        },
		pl(){
			this.$router.push({
				path:'/pl',
				query:{
					id:this.$route.query.bid,
					type:3
				}
			})
		},
        tuiguang(){
          this.popupVisible3 = true;
        },
        un2(){
          this.popupVisible3 = false;
        },
        onCopy () {
          this.popupVisible3 = false;
          this.$toast({
            message:'复制成功',
          });
          // this.snackBar.info(this.$t('prompt.copySuccess'))
        },
        onError () {
          // this.$message.error(this.$t('prompt.copyFail'))
        },
        huo1(){
		   $('.shoewr-chenhou').fadeIn();
        },
        huo2(){
          $('.shoewr-chenhou').fadeOut();
        },
        dianhua(){
          $('.shoewr-chen-popu').fadeIn();
        },
		xuan(item,index){
			
			if(item.is_pay!=1||item.is_pay!='1'){
				
				var choosearr = this.chooseid;
				// console.log(choosearr);
				var i = choosearr.length;
				// console.log(i)
				//取消改阶段的购买
				if(item.bol1){  
					
					this.bol = false;
					// console.log('移除'+item.id);
					if(i<=1){
						layer.open({
							content: '您至少购买一个阶段',
							skin: 'msg',
							time: 2 //1秒后自动关闭
						});
					}else{
						item.bol1 = !item.bol1;
						// console.log(choosearr)
						// console.log(i)
						// console.log(this.chooseidpay);
						this.$refs.xuan[index].className="xuanze1";
						for(var j=0;j<i;j++){
							// console.log(choosearr[j])
							if(item.id==choosearr[j]){
								choosearr.splice(j, 1);
							}
						}
						// console.log(this.chooseidpay);
						this.chooseid = choosearr;
						// console.log(this.chooseid)
						this.textcenter = '(您可组合购买章节，但不享受系列优惠价)';
						var newarr1 = [];
						for (var i = 0; i<this.liebiao.length;i++){
							if(this.liebiao[i].is_pay==1||this.liebiao[i].is_pay=='1'){
							}else{
							  var newarr1 = newarr1.concat(this.liebiao[i].id);
							}
						}
						
						this.chooseidpay = newarr1;
						// console.log(this.chooseidpay1);
						this.orderprice(this.chooseid,0);
					}
				}else{
					item.bol1 = !item.bol1;
					var choosearr = this.chooseid;
					// console.log(choosearr);
					var i = choosearr.length;
					choosearr[i]=item.id;
					console.log(this.chooseidpay);
					if(this.chooseidpay.length==this.chooseid.length){
						this.bol = true;
						this.$refs.xuan[index].className="red";
						this.orderprice(this.chooseid,1);
						this.textcenter = '(购买班级全部章节，享受系列优惠价)';
					}else{
						this.bol = false;
						this.$refs.xuan[index].className="red";
						this.orderprice(this.chooseid,0);
						this.textcenter = '(您可组合购买章节，但不享受系列优惠价)';
					}
				}
				
			}else{
				if(Number(item.price)>0){
					layer.open({
						content: '该阶段您已经购买过',
						skin: 'msg',
						time: 2 //1秒后自动关闭
					});
				}else{
					layer.open({
						content: '该阶段免费,无需购买',
						skin: 'msg',
						time: 2 //1秒后自动关闭
					});
				}
			}
			
		},
		// 班级选择阶段返回价格
		orderprice(allstr,type){
			var str = allstr.toString(',');
			this.axios({
			  method:'get',
			  url:this.$store.state.url + "Pay/classOrderPrice",
			  params: {
				  id:this.id,
					type:type,    //0-单章购买，1-全部购买
					spec_ids:str
			  }
			}).then(res=>{
				// console.log(res);
				if(res.data.errcode==0||res.data.errcode=='0'){
					var data = res.data.data;
					// console.log(data);
					this.specPrice = data;
				}
			})
		},
		// 点击全部
		quanbu(){
			// this.chooseid =[];
			this.bol = true;
			if (this.bol){
				this.textcenter = '(购买班级全部章节，享受系列优惠价)';
				var newarr1 = [];
				for (var i = 0; i<this.liebiao.length;i++){
				    // var mewarrlo = [];
					this.liebiao[i].bol1 = true;
					// console.log(this.liebiao[i].is_pay)
					if(this.liebiao[i].is_pay==1||this.liebiao[i].is_pay=='1'){
					}else{
					  this.$refs.xuan[i].className="red";
					  var newarr1 = newarr1.concat(this.liebiao[i].id);
					}
				}
				
				
				var chooseidpay = newarr1;
				this.chooseidpay = newarr1;
				
				this.chooseid = chooseidpay;
				
				this.orderprice(chooseidpay,1);
			}
		},
		// 点击确认购买
		queren(){
			if(this.bol){
			  var chooseid = this.chooseidpay;
			}else{
			  var chooseid = this.chooseid;
			}
			// var chooseid = this.chooseidpay;
			// console.log(chooseid);
			// console.log(chooseid.length)
			if(chooseid.length==0||chooseid.length=='0'){
				layer.open({
					content: '请选择您要购买的阶段',
					skin: 'msg',
					time: 2 //1秒后自动关闭
				});
			}else{
				if(localStorage.getItem('token')){
					var newarr = chooseid;
					var str = newarr.toString(',');
					this.axios.get(this.$store.state.url +'Pay/classOrder',{
						 params:{
							 id:this.id,
							 spec_ids:str
						 }
					}).then(res=>{
						if(res.data.errcode==0||res.data.errcode=='0'){
							var data = res.data.data;
							this.coursearr=data;
							this.spec_name = data.spec_name;
							var order_id = data.id;
							this.$router.push({
							    path:'/order',
								query:{
									id:this.id,
									order_id:order_id,
									type:3,
									pay:0,
									// specids:JSON.stringify(chooseid)
								}
							})
						}else{
							layer.open({
								content: res.data.msg,
								skin: 'msg',
								time: 2 //1秒后自动关闭
							});
						}
					})
// 					this.$router.push({
// 						path:'/order',
// 						query:{
// 							id:this.id,
// 							type:3,
// 							specids:JSON.stringify(chooseid)
// 						}
// 					})
				}else{
					this.nologin();
				}
			}
		},
		un(){
			this.popupVisible = false
		},
        un1(){
          $('.shoewr-chen-popu').fadeOut();
        },
        buy(){
			// console.lgo(8989)
			if(localStorage.getItem('token')){
                this.popupVisible = true
			}else{
				this.popupVisible = false
				this.nologin();
			}
        },
        goback(){
          this.$router.push({
            path:'/'
          })
        },
        showclick(item,index){
           
			var bolf = this.coursebiao[index];
			if(bolf==0||bolf=='0'){
				Vue.set(this.coursebiao,index,1);
			}else{
			  Vue.set(this.coursebiao,index,0);
			}
			
        },
        xq(i){
           this.$router.push({
             path:'/steach',
             query:{
               id:i.id
             }
           })
        },
        attention(i,dex){
		  if(localStorage.getItem('token')){
			  
			  this.axios({
				method:'get',
				url:this.$store.state.url + "find/teacherColl",
				params: {
				  id:i.id,
				}
			  }).then(res=>{
				if (res.data.errcode == 0||res.data.errcode == '0'){
				   // alert('关注成功');
				 
					 if(i.collection==0||i.collection=='0'){
						 this.$toast({
							 message:'关注成功',
							 position:'bottom'
						 });
					 }else{
						 this.$toast({
							 message:'已取消关注',
							 position:'bottom'
						 });
					 }
					 this.teacher();
				} else {
				  this.$toast({
					 message:res.data.msg,
					 position:'bottom'
				  });
				}

			  })
		  }else{
			  this.nologin();
		  }


        },
				// 点击课程
        zhi(it,item){
			// console.log(it);
			// console.log(item);
			if(localStorage.getItem('token')){
				if ((item.is_pay == 1||item.is_pay == '1'||it.price==0||it.price=='0'||it.price==0.00||it.price=='0.00')&&(it.flag != 0||it.flag != '0')) {
					if(it.type==2||it.type=='2'){
						this.$router.push({
							path:'/demand',
							query:{
								y:'',
								type:2,
								id:it.id,
								cid:this.id,
								special_id:item.id,
								zid:'',
								zbo:0,
								url:this.$route.fullPath
							}
						})
					}else{
						this.$router.push({
							path:'/demand',
							query:{
								y:'',
								type:2,
								cid:this.id,
								special_id:item.id,
								id:it.id,
								zid:'',
								zbo:1,
								url:this.$route.fullPath
							}
						})
					}
				}
			}else{
				this.nologin();
			}
        },
        again(id){
          this.axios.get(this.$store.state.url + "Classroom/desc",{
            params:{
              id:id
            },
          }).then(res=>{
						// this.load=true;
            // console.log(res.data)
            if (res.data.errcode == 0||res.data.errcode == '0'){
                this.obj = res.data.data;
				// this.specPrice = this.obj.price;
				$('title').html(this.obj.name)
				if(this.obj.is_pay==0||this.obj.is_pay=='0'){
					this.bol = true;
				}else{
					this.bol = false;
					this.active = 1;
				}
				
// 				var url1 = window.location.href.split(':')[0];
// 				var link =url1+ this.$store.state.linkurltap +'/details?id='+ id;
				// console.log(link);
				// }
				
				 // var url =url1+ this.$store.state.linkurltap;
				 var url =window.location.href;
				 var obj = {
				   title: this.obj.name,		//分享标题
				   desc: this.$store.state.desc,	//分享内容
				   linkurl: url,//分享链接
				   img: this.$store.state.img+this.obj.thumb,
				 }
				this.sdk.getJSSDK(url,obj,this.$store.state.url);
            }
          })
        },
        shoucang(){
					// console.log(888);
         var a=localStorage.getItem('token') 
          var b=this.$route.query.bid
          if(a){
          this.axios.get(this.$store.state.url+'Classroom/collect',{
             params:{
                  id:this.id
                }
          }).then(res=>{
            // console.log(res)
            if(res.data.errcode==0){
               var collect = this.obj.collection;
               if(collect==0||collect=='0'){
                 	this.$toast({
						 message:'收藏成功',
						 position:'bottom'
					})
		            this.obj.collection = 1;
               }else{
                  this.$toast({
					 message:'已取消收藏',
					 position:'bottom'
				 })
                   this.obj.collection = 0;   
               }
                    
            }else{
              this.$toast({
                 message:res.data.msg,
                 position:'bottom'
                 })
            }
          })
          }else{
            this.nologin()
          }
        },
        gun(){
          var  scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          this.top = scrollTop;
        },
		loadBottom(){
			this.allLoaded = true;// if all data are loaded
			
			this.page++;
			this.plliebiao(1);
		},
        //获取评论列表
        plliebiao(type){
			var that = this;
			var page = that.page;
			  that.axios.get(that.$store.state.url + "Live/commentList",{
				params:{
				  id:that.id,
				  type:3,
				  page:page,
				  limit:10
				},
			  }).then(res=>{
				
				if (res.data.errcode == 0||res.data.errcode == '0'){
					var list = res.data.data.lists;
					if (page == 1||page == '1'){
						that.pinglun = list;
					}else{
						that.pinglun = that.pinglun.concat(list);
					}
					if(list.length<10){
						that.allLoaded = true;
					}else{
						if(type==1||type=='1'){
							that.$refs.loadmoredetail.onBottomLoaded();
							that.allLoaded = false;
						}
					}
					
					 if (that.pinglun.length>0){
					   that.b = false
					 } else {
					   that.b = true
					 }
				}
			  })
        },
		teacher(){
			 //获取讲师阵容
			this.axios.get(this.$store.state.url + "Classroom/teacher",{
			  params:{
				id:this.id
			  },
			}).then(res=>{
			  // console.log(res.data)
			  if (res.data.errcode == 0){
				this.teachers = res.data.data;
			  }
			})
		}
      },
     
      mounted() {
        // console.log(this.$route.fullPath)
        this.$refs.top.style.height = document.documentElement.clientHeight - this.$refs.bto.clientHeight + 'px'
        
		this.id = this.$route.query.bid;
		
	
		this.loginsuccess();

        //获取班级详情
        this.again(this.$route.query.bid)

          //获取班级课程列表
        this.axios.get(this.$store.state.url + "Classroom/courseList",{
          params:{
            id:this.$route.query.bid
          },
        }).then(res=>{
          // console.log(res.data)
		  this.loadmo=true;
          if (res.data.errcode == 0||res.data.errcode == '0'){
            this.liebiao = res.data.data;
			// console.log(liebiao)
            var coursebiao = [];
			this.xuanze = res.data.data;
			//给弹窗选择数组添加
			for (var i = 0;i < this.xuanze.length;i++){
				this.xuanze[i]["bol1"]=true;
				// this.liebiao[i].bol1 = true;
				// this.$refs.xuan[i].className="xuanze1";
			}
			
			for (var i = 0;i < this.liebiao.length;i++){
				this.liebiao[i]["bol1"]=true;
				// this.liebiao[i].bol1 = true;
				// this.$refs.xuan[i].className="xuanze1";
			}
			
			for (var i = 0;i < this.liebiao.length;i++){
				coursebiao[i]=0;
				// this.liebiao[i].bol1 = true;
			}
			this.coursebiao = coursebiao;
			// console.log(this.coursebiao)
			
			// console.log(this.coursebiao);
			
			
			var newarr = [];
			var newarr1 = [];
			var liebiao = this.liebiao;
			for(var i=0;i<liebiao.length;i++){
				newarr[i]=liebiao[i].id
				if(liebiao[i].is_pay!=1||liebiao[i].is_pay!='1'){
					this.liebiao[i]["bol1"]=true;
					var newarr1 = newarr1.concat(liebiao[i].id);
				}
			}
			// console.log(newarr1);
			this.chooseidpay = newarr1;
			this.chooseidpay1 = newarr1;
			console.log(this.chooseidpay1);
			this.chooseid = newarr1;
			// this.chooseid = newarr;
			
			// 默认选中全部
			// this.quanbu();
			if(this.obj.is_pay==1||this.obj.is_pay=='1'){
				this.bol=true;
				// this.liebiao[i]["bol1"]=true;
			}
			this.orderprice(this.chooseidpay,1);
						
			// console.log(this.liebiao);
          }
        })

         this.teacher();

          //获取评论列表
          this.plliebiao(0);

          //滚动到指定位置
          this.$nextTick( ()=> {
            if ($('.begin').length > 0){
              window.pageXOffset = $('.begin').eq(0).parent().offset().top - 35;
              document.documentElement.scrollTop = $('.begin').eq(0).parent().offset().top - 35;
              document.body.scrollTop = $('.begin').eq(0).parent().offset().top - 35;
            }
          })
		  
		  
		  //获取咨询详情
		  this.axios.get(this.$store.state.url + 'find/service_info').then(res=>{
		    // console.log(res.data)
		   if (res.data.errcode == 0||res.data.errcode == '0'){
		     this.serviceinfo = res.data.data
		    }
		  })


        //判断时间
        var tmp = Date.parse( new Date() ).toString();
        tmp = tmp.substr(0,10);
        this.time = tmp;
        // console.log(this.time);

        //滚动监听
        window.addEventListener('scroll', this.gun)

      },
      watch:{
        top(newName, oldName){
          if (newName > oldName){
            this.fix1 = false;
          } else {
            this.fix1 = true;
          }
        }
      },
      beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background-color:#F7F7F7;')
      },

      beforeDestroy () {
        document.querySelector('body').removeAttribute('style')
      },
    }
</script>
<style scoped>
	.detailline{
		width: 7.5rem;
		height: .2rem;
		background: #f7f7f7;
	}
	.app_pay_chen{
		color: #0287FF !important;
	}
  >>>.van-hairline--top-bottom::after{
    border-width: 0 0;
  }
  >>>.van-tabs__wrap{
    box-shadow:0 3px 5px 0 rgba(71,68,80,0.06);
  }
	.freeprice{
		background: #FE9C2B !important;
	}
	.zboshate{
		background: #999999 !important;
	}
  .queren{
    width: 100%;
    height:0.88rem;
    line-height: 0.88rem;
    background:rgba(2,135,255,1);
    color: #fff;
    text-align: center;
    position: absolute;
    bottom: 0;
    font-size: 0.36rem;
    font-weight: bold;
    outline: none;
    border: none;
  }
  .span1{
    padding: 0.09rem 0.3rem 0.09rem 0.3rem;
    background:rgba(247,247,247,1);
    border-radius:0.2rem;
    margin-top: 0.3rem;
    display: inline-block;
    color: #333;
    font-size: 0.26rem;
    margin-left: 0.3rem;
    border:0.02rem solid rgba(247,247,247,1);
  }
  .span1 span:nth-child(1){
    color: #F97B43;
  }
  .xuanze{
	  max-height: 5rem;
	  overflow-y:scroll;
  }
  .xuanze1{
	max-width: 90%;
    /* margin: 0.3rem auto 0; */
	margin-top: 0.3rem;
	margin-left: 0.3rem;
    padding: 0.09rem 0.3rem 0.09rem 0.3rem;
    background:rgba(247,247,247,1);
    border-radius:0.2rem;
    display: inline-block;
    border:0.02rem solid rgba(247,247,247,1);
    color: #333;
    font-size: 0.26rem;
  }
	.xuanactive{
		color: #999999 !important;
	}
	.xuancolor{
		max-width: 90%;
		margin: auto;
	}
	.xuanpay{
		color: #F97B43;
		font-size: .26rem;
		margin-left: .1rem;
	}
	/* .xuangree{
		
	} */
  .red{
		max-width: 90%;
    margin-top: 0.3rem;
    margin-left: 0.3rem;
    padding: 0.09rem 0.3rem 0.09rem 0.3rem;
    border-radius:0.2rem;
    display: inline-block;
    font-size: 0.26rem;
    background:rgba(253,244,236,1);
    border:0.02rem solid rgba(255,2,20,1);
    color: #FF0214;
  }
  .red span:nth-child(1){
    color: #F97B43;
  }
  p{
    margin-bottom: 0;
  }
	.grade-pic{
		width: 7.5rem;
		height: 4.25rem;
	}
	.header{
		width: 100%;
		height: 100%;
	}

  .tab{
    margin-top: 0.2rem;
    background: #fff;
    padding-bottom: 1.28rem;
  }
  .table{
    width: 100%;
    height: 0.68rem;
    display: flex;
    justify-content: space-around;
    background: #fff;
    z-index: 1;
  }
    .table1{
      width: 100%;
      height: 0.68rem;
      display: flex;
      justify-content: space-around;
      position: fixed;
      top: 0;
      background: #fff;
      z-index: 1;
    }
    .table1 p{
      width: 17%;
      height: 0.68rem;
      font-size:0.3rem;
      font-weight:500;
      text-align: center;
      line-height: 0.68rem;
      background: #fff;
    }
  .table p{
    width: 17%;
    height: 100%;
    font-size:0.3rem;
    font-weight:500;
    text-align: center;
    line-height: 0.68rem;
    background: #fff;
  }
  .borderImg{
    width: 100%;
    margin-top: 0.05rem;
    padding: 0.2rem 0 0.2rem 0;
    box-sizing:border-box;
  }
  .borderImg div{
    width: 92%;
    margin: auto;
    font-size: 0.25rem;
  }
  .chu>>>img{
    width: 100%;
  }
  .fixbottom{
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 0.88rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
		z-index: 99;
    /*background: black;*/
  }
  .shoucang{
    font-size:0.24rem;
    color:rgba(194,201,211,1);
    text-align: center;
  }
  .shoucang img{
    width: 0.4rem;
  }
  .mai{
    font-size: 0.24rem;
    color: #C2C9D3;
    margin-left: 0.2rem;
  }
  .mai span{
    color: #0287FF;
  }
  .pad button{
    height: 0.7rem;
    font-size:0.28rem;
    font-weight:bold;
    color:rgba(255,255,255,1);
    border-radius: 0.35rem;
    background: #0287FF;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border: none;
    outline: none;
  }
	.padactive{
		background: #999 !important;
	}
  .teach{
    width: 92%;
    margin: auto;
  }
  .p1{
    height: 0.9rem;
    font-size:0.3rem;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
		
  }
  .itemmai{
	  color: #FE9C2B;
	  font-size: .26rem;
	  margin-left: .1rem;
  }
	.p1 span{
		width: 80%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
  .study{
    width: 100%;
    background:rgba(247,249,251,1);
    /*display: none;*/
  }
	.study .everygrade:last-child{
		border-bottom:none;
	}
	.everygrade{
		width: 91%;
		height: 1.22rem;
		margin: auto;
		border-bottom: 0.01rem solid rgba(237,237,237,1);
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-content: center;
		/* position: relative; */
	}
	.gradeleft{
		width: 4rem;
	}
	.everygrade .gradeleft p:nth-child(1){
		/* width: 92%; */
		/* margin: auto; */
		color: #333333;
		font-size: .26rem;
		margin-top: .3rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.everygrade .gradeleft p:nth-child(2){
		color: #999999;
		font-size: .22rem;
		 margin-top: .1rem;
		 padding-bottom: .1rem;
	}
	.everygrade .graderight p{
		width: 1.4rem;
		height: .44rem;
		color: #fff;
		line-height: .44rem;
		text-align: center;
		background: #0287FF;
		font-size: .26rem;
		border-radius: .22rem;
		margin-top: .39rem;
	}
  .intr{
    width: 92%;
    margin: auto;
    border-bottom: 0.01rem solid rgba(237,237,237,1);
   padding-bottom: 0.29rem  ;
    margin-top: 0.3rem;
  }

  .top{
    width: 100%;
    height: 1.2rem;
    display: flex;
	justify-content: space-between;
  }
  .topclear{
	  display: flex;
	  justify-content: flex-start;
  }

  .p3{
    width: 1.2rem;
    height: 1.2rem;
    text-align: center;
    /* float: left; */
  }
  .p3 img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .name{
    /* float: left; */
    margin-left: 0.3rem;
    width: 3.2rem;
    height: 1.2rem;
    flex-wrap: wrap;
    display: flex;
    align-content: center;
  }
	.master-title{
		display: inline-block;
		color: #F97B43 !important;
		font-weight: 500 !important;
	}
  .name p:nth-child(1){
    font-size:0.3rem;
    font-weight:bold;
    color:rgba(51,51,51,1);
  }
    .name p:nth-child(2){
      width: 3.2rem;
      font-size:0.24rem;
      font-weight:500;
      color:rgba(153,153,153,1);
      margin-top: 0.1rem;
	  overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
    }
  .guanzhu{
    /* float: right; */
    width: 2rem;
    height: 1.2rem;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-end;
  }
  .gg,.gg1{
	  width: 2rem;
  }
  .gg span{
    width:1rem;
    height:0.44rem;
    background:rgba(2,135,255,1);
    border-radius:0.22rem;
    text-align: center;
    line-height: 0.44rem;
    color: #fff;
    font-size: 0.24rem;
	display: block;
	margin-left:1rem;
  }
  .gg1 span{
    width:1rem;
    height:0.44rem;
    background:rgba(240,240,240,1);
    border-radius:0.22rem;
    text-align: center;
    line-height: 0.44rem;
    color: #999999;
    font-size: 0.24rem;
	margin-left:1rem;
	display: block;
  }
  .guanzhu p:nth-child(2){
    font-size:0.24rem;

    font-weight:500;
    color:rgba(153,153,153,1);
    margin-top: 0.1rem;
  }
  .long{
    font-size:0.22rem;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    text-indent: 0.5rem;
    color:rgba(153,153,153,1);
    margin-top: 0.27rem;
  }
  .arrows{
    width: 0.2rem;
    height: 0.1rem;
	vertical-align: middle;
  }
  .r{
    background: #fff;
    padding-bottom: 0.2rem;
    overflow: hidden;
  }
  .doctor{
    width: 92%;
    margin: auto;
    margin-top: 0.3rem;
  }
  .docImg{
    width: 0.54rem;
    height: 0.54rem;
    border-radius: 50%;
    vertical-align: top;
  }
  .content{
    width: 87%;
    display: inline-block;
    margin-left: 0.2rem;
  }
  .content p:nth-child(1){
    font-size: 0.24rem;
    color:rgba(51,51,51,1);
  }
  .content p:nth-child(2){
    color: #C2C9D3;
    font-size: 0.24rem;
    line-height: 0.32rem;
  }
  .content p:nth-child(3){
    font-size: 0.24rem;
    color: #333;
    margin-top: 0.2rem;
    line-height: 0.32rem;
	word-wrap:break-word;
  }
  .content p:nth-child(4){
    margin-top: 0.15rem;
    float: right;
  }
  .content p:nth-child(4) img{
    width: 0.27rem;
    vertical-align: middle;
  }
  .bluezan{
    font-size:0.22rem;
    color:rgba(2,135,255,1);
    line-height:0.19rem;
    vertical-align: middle;
  }
  .grayzan{
    font-size:0.22rem;
    color:#C2C9D3;
    line-height:0.19rem;
    vertical-align: middle;
  }
  .tuiguang{
    width: 1rem;
    position: fixed;
    right: 0.2rem;
    bottom: 2.7rem;
    z-index: 888;
  }
  .goback{
    width: 1rem;
    position: fixed;
    right: 0.2rem;
    bottom: 1.5rem;
    z-index: 888;
  }
  .m{
    width: 92%;
    margin: auto;
    display: flex;
    align-items: center;
  }
  .m1{
    width: 83%;
	padding-right: .3rem;
  }
  .m1name{
    width: 100%;
  }
  .m1 p:nth-child(1),.m1name p:nth-child(1){
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    margin-top: 0.15rem;
  }
  .baoguo {
    margin-top: 0.15rem;
  }
  .baoguo span:nth-child(1){
    font-size:0.2rem;
    color:rgba(255,2,20,1);
    line-height:0.32rem;
    float: left;
	width: 80%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
  }
  .baoguo span:nth-child(2){
    width:0.9rem;
    height:0.35rem;
    background:rgba(255,255,255,1);
    border:0.02rem solid rgba(255,2,20,1);
    border-radius:0.15rem;
    font-size: 0.2rem;
    text-align: center;
    line-height: 0.35rem;
    color: #FF0214;
    float: right;
  }
  .baoguo:after{
    content: '';
    display: block;
    clear: both;
  }
  .sj{
    margin-top: 0.15rem;
	display: flex;
    justify-content: space-between;
  }
  .sj span:nth-child(1){
    font-size:0.24rem;
    color:rgba(194,201,211,1);
    line-height:0.32rem;
  }
  .sj span:nth-child(2){
    font-size:0.3rem;
    font-weight:bold;
    color:rgba(255,2,20,1);
    line-height:0.32rem;
    float: right;
  }
  .top3{
    height: 100%;
    text-align: center;
    padding-left: 0.3rem;
	margin-left: .3rem;
    margin-bottom: 0.2rem;
	border-left: 1px solid #EDEDED;
  }
  .top3 img{
    width: 0.34rem;
    height: 0.46rem;
  }
  .top3 p{
    font-size:0.2rem;
    font-weight:500;
    color:rgba(2,135,255,1);
  }
  .huo1{
    width: 100%;
    height: 0.5rem;
    background:rgba(252,229,211,1);
    margin-top: 0.2rem;
    color:rgba(226,47,58,1);
  }
  /*.huo1 p{*/
    /*width: 92%;*/
    /*height: 0.5rem;*/
    /*line-height: 0.5rem;*/
    /*margin: auto;*/
    /*font-size:0.24rem;*/
    /*color:rgba(226,47,58,1);*/
    /*overflow: hidden;*/
    /*text-overflow:ellipsis;*/
    /*white-space: nowrap;*/
  /*}*/
  .fuzhi{
    width:3.3rem;
    height:0.7rem;
    background:rgba(2,135,255,1);
    border-radius:0.35rem;
    font-size: 0.28rem;
    font-weight: bold;
    margin-top: 0.5rem;
    outline: none;
    border: none;
    color: #fff;
  }
  .url{
    width: 6.5rem;
    height: 0.5rem;
    margin:0.5rem auto 0;
    border-radius:0.24rem;
    background:rgba(247,247,247,1);
    padding: 0.1rem 0.27rem 0.1rem 0.27rem;
    overflow: hidden;/*超出部分隐藏*/
    white-space: nowrap;/*不换行*/
    text-overflow:ellipsis;/*超出部分文字以...显示*/
  }
</style>
